<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>

    <div id="app">
        数学：<input type="text" v-model="mathScore"/>
        英语:<input type="text" v-model="englishScore"/>
        总分：<input type="text" v-model="sumScore()"/>
        监听的总分:<input type="text" v-model="sumScore2">
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript">
       var vm = new Vue({
            el:"#app",
            data:{
                mathScore:2,
                englishScore:2,
                sumScore2:0,
            },
            methods: {
                sumScore: function () {
                    console.info("sumScore被调用")
                    return (this.mathScore - 0) + (this.englishScore - 0)
                }
            },
           // 监听器方法1：watch
            watch: {
                mathScore: function (newValue, oldValue){
                    console.log("新值"+newValue)
                    console.log("旧值"+oldValue)
                    this.sumScore2 = (newValue-0) + (this.englishScore-0)
                }
            },

        })
        
    </script>
</body>
</html>